<template>
	<view class="container">
<!--		<view class="notes">-->
<!--			{{data.notes}}-->
<!--		</view>-->
		<view class="header">
			<view class="left">
				<image :src="data.info.shop_head" mode=""></image>
			</view>
			<view class="right">
				<view class="title">
					{{data.info.name}}
				</view>
				<view class="titles">
					{{data.info.introduce}}
				</view>
			</view>
		</view>
<!--		<view class="titlebox">-->
<!--			我的消费券(元)-->
<!--		</view>-->
<!--		<view class="moneys">-->
<!--			¥  {{$toFiexd(data.userInfo.money,2)}}-->
<!--		</view>-->
		<view class="titlebox">
			订单金额(元)
		</view>
		<view class="moneys">
			¥  <input  placeholder="请询问服务员后输入金额" v-model="data.money" />
		</view>
		<view class="titlebox">
			备注
		</view>
		<view class="moneys">
			  <input  placeholder="请输入备注" v-model="data.user_notes" />
		</view>
		<view class="titlebox">
			支付方式
		</view>
		<view class="backList" v-if="data.payment_type==4" @click="binding">
		<!-- 			<view v-if="data.bakn.bank_card_no==''" class="backNamesm">
						<image class="backImg" src="https://pubuimg.cqguanjie.cn/chat/16950024915493"></image>
						<text >请选择银行卡</text>
					</view> -->
					<view  class="backNames">
						<image class="backImg" src="https://pubuimg.cqguanjie.cn/chat/16950024915493"></image>
						<text class="backId">{{data.bakn.bank_card_no||'请选择银行卡'}}</text>
					</view>
					<image class="selects" src="https://pubuimg.cqguanjie.cn/chat/16950033913179"></image>
				</view>
				<view class="itembox" v-if="data.bakn.mobile_no&&data.payment_type==4">
					<view class="label">
						开户手机号:
					</view>
					<view class="input" style="display: flex;align-items: center;font-size: 10px;">
						{{data.bakn.mobile_no}}
						<view class="time" @click="subimit(0)">
							{{data.time}}
						</view>
					</view>
				</view>
				<view class="itembox"  v-if="data.bakn.mobile_no&&data.payment_type==4">
					<view class="label">
						验证码:
					</view>
					<uni-easyinput class="input" v-model="data.msg" placeholder="请输入验证码" />
				</view>
		<view class="goodsbox">
			<radio-group @change="radioChange">
				<label class="" v-for="(item, index) in data.paylist" :key="index">
					<view class="paylist" v-if="item.show=='1'">
						<view class="left">
							<image :src="item.url" mode="aspectFill"></image>{{item.name}}{{item.id==0?`(${userInfo.money})`:''}}{{item.id==5?`(${userInfo.coupon})`:''}}
						</view>
						<view>
							<radio  :value="item.id" :checked="item.id == data.payment_type" />
						</view>
					</view>
				</label>
			</radio-group>
		</view>

		<view class="prompt">
			温馨提示:本次支付只适用线下买单交易,不支持退款,支付前请确认好!
		</view>
		<view class="" style="width: 0;height: 0;" v-if="data.html">
			<web-view :src="data.html" style="width: 0;height: 0;"></web-view>
		</view>
		<view class="bottomButton" >
			<view class="btn" style="background: #FF4A01" @click="subimit(1)">已和店家确认,立即买单</view>
		</view>
		<!-- 银行卡列表 -->
		<uni-popup ref="share"  class="sharep" style="border-top-left-radius: 20px;border-top-right-radius: 20px;">
			<view class="popupcontent">
				<view class="selectBank">
					<text class="selectMdd">选择银行卡</text>
					<uni-icons type="closeempty" size="20" class="popupIcon" @click="share.close()"></uni-icons>
				</view>
				<view class="information">
					<view class="BankList" v-for="(lin,index) in data.list" :key="index" @click="selectBank(lin)">
						<view class="nameAndBankName">
							<text class="name">{{lin.name}}</text>
							<!-- <text>{{lin.bank_name}}</text> -->
						</view>
						<view class="bankAddress">
							<!-- <text class="address">{{lin.bank_address}}</text> -->
							<text>{{lin.bank_card_no}}</text>
						</view>
					</view>
				</view>
				<view class="btn" @click="$goURl('/pages/order/banklist')">
					添加银行卡
				</view>
			</view>
		</uni-popup>
		<rudon-payWithPassword :displayByParent="pluginShowing" :pwdLength="6" :amount="data.money" titleWindow="请输入支付密码"
			titleAmount="支付购买商品" desc=" " descColor="#FB7B00" :needLog="true" :plaintext="false"
			@whenFullfilled="whenPwdReady">
		</rudon-payWithPassword>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
			info:{},
			html:'',
			time:'获取验证码',
			msg:'',
			user_notes:"",
			list:[],
			userInfo:{},
			paylist:[

        // {
        //   "id": "0",
        //   "name": "消费券",
        //   "show": "1",
        //   "sort": "0",
        //   "url": "https://pili-vod.guanxikeji.com/fubao/img/1755654395283.png"
        // },
        {
          "id": "1",
          "name": "微信",
          "show": "1",
          "sort": "0",
          "url": "https://img.fubaozx.cn/static/oldImg/16995010729858.png"
        },
        {
          "id": "2",
          "name": "支付宝",
          "show": "1",
          "sort": "77",
          "url": "https://img.fubaozx.cn/static/oldImg/16995010243451.png"
        },
        // {
        //   "id": "4",
        //   "name": "银行卡",
        //   "show": "1",
        //   "sort": "0",
        //   "url": "https://img.fubaozx.cn/static/oldImg/16995010958070.png"
        // },
        // {
        //   "id": "5",
        //   "name": "补贴券",
        //   "show": "1",
        //   "sort": "0",
        //   "url": "https://pili-vod.guanxikeji.com/fubao/img/1755654411897.png"
        // }
			],
			money:'',
			discount:'',
			notes:'',
			payment_type:0,
			password:'',
			bakn:{},
			bankstate:0,
			mch_order_no:""
	})
	let pluginShowing=ref(false)
	let share=ref()
  let userInfo = ref('')
	onLoad((option)=>{
		console.log(option)
		shopInfo(option.id)
		data.userInfo=uni.getStorageSync('userInfo')
		data.discount=Number(option.discount)//比例
		data.notes=option.notes//备注

		if(Number(option.money)){
			data.money=Number(option.money)//默认金额
		}else{
			data.money=''
		}
    userInfo.value = uni.getStorageSync('userInfo')

		// data.paylist=uni.getStorageSync('payType')
	})
	onShow(()=>{
		proxy.$request({
					url: `api/pay_bank/?page=1&size=50`,
					method: 'get',
					success(res) {
						data.list=res.data.data
						if(res.data.data.length>0){
							data.bakn=res.data.data[0]
						}
					}
				})
	})
	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		console.log('onReachBottom')
	})
	// 打开银行卡列表
	function binding(){
		share.value.open('bottom')
	}
	// 选取银行卡
	function selectBank(item){
		data.bakn=item
		share.value.close()
	}
	function shopInfo (id){//获取详情
		proxy.$request({
			url: `api/shopInfo/?id=${id}`,
			method: 'get',
			success(res) {
				if(res.errno==0){
					data.info=res.data
				}else{
					uni.showToast({
						icon:'none',
						title:res.errmsg
					})
					setTimeout(()=>{
						uni.navigateBack()
					},200)
				}
			}
		})
	}
	function radioChange(evt){//选择方式
		data.payment_type=Number(evt.detail.value)
	}
	// 点击付款
	function subimit(i){
    if(data.payment_type==1||data.payment_type==2){
      uni.showToast({
        icon:'none',
        title:'暂未开放'
      })
      return;
    }
		data.bankstate=i
		if(data.money<=0){
			uni.showToast({
				icon:'none',
				title:'请输入正确的金额'
			})
			return
		}
		if(data.payment_type==0||data.payment_type==5){
			pluginShowing.value = true
			setTimeout(()=>{
				pluginShowing.value = false
			}, 200)
		}else if(data.payment_type==3){
			submit()
		}else{
			if(JSON.stringify(data.bakn)=='{}'){
				uni.showToast({
					icon:'none',
					title:'请选择银行卡'
				})
			}else if(i==1&&data.msg.length!=6){
				uni.showToast({
					icon:'none',
					title:'请输入验证码'
				})
			}else{
				submit()
			}

		}

	}
	// 输入的密码
	function whenPwdReady(e){
		console.log(e)
		data.password=e
		if(e.length==6){
			submit()
		}
	}

	function submit(){//支付
		proxy.$request({
			url: `api/scanPay/`,
			method: 'post',
			data:{
				business_id:data.info.ID+'',
				password:data.password,
				money:Number(data.money),
				pay_type:data.payment_type,
				discount:data.discount?data.discount:5,
				notes:data.notes?data.notes:data.info.name,
				bank_id:data.bakn.ID||0,
				sms_code:data.bankstate==1?data.msg:'',
				mch_order_no:data.bankstate==1?data.mch_order_no:'',
				user_notes:data.user_notes
			},
			success(res) {
				uni.showToast({
					icon:'none',
					title:res.errmsg
				})
				if(data.payment_type==0||data.payment_type==5){
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				}else if(data.payment_type==3){
					if(res.errno==0){
						if(res.data.rc_Result){
							let indexs = 0
							let listsss = res.data.rc_Result.split("'")
							listsss.forEach((item, index) => {
								if (item == '>location.href=') {
									indexs = index + 1
									console.log(indexs)
								}
							})
							try {
								window.location.href = listsss[indexs]
							} catch (e) {
								data.html = listsss[indexs]
							}

							setTimeout(() => {
								data.html = ""
								uni.switchTab({
									url: '/pages/personal/index'
								})
							}, 2000)
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.rb_CodeMsg
							})
						}

					}else{
						uni.showToast({
							icon: 'none',
							title: res.errmsg
						})
					}
				}else{
					if(res.errno==0&&data.bankstate==0){
						data.mch_order_no=res.data.mch_order_no
						let times=60
						let timer=setInterval(function(){
							if(times==0){
								data.time='获取验证码'
								clearInterval(timer)
							}else{
								times--
								data.time=times+'S重发'
							}
						},1000)
					}else if(res.errno==0){
						uni.showLoading({
								title: '支付中'
							});
							let i=0
							let timer = setInterval(()=>{
							i++
							proxy.$request({
								url: `api/paymentQuery/?order=${data.mch_order_no}`,
								method: 'get',
								success: (resData) => {
									if(i==3||resData.errno==0||resData.errno==1){
										uni.hideLoading();
										uni.showToast({
											icon:'none',
											title:resData.errmsg
										})
										setTimeout(() => {
											uni.navigateBack()
										}, 1000)
										clearInterval(timer)
									}
								}
							})

						},2000)
					}
				}

			}
		})
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 30upx;
		.header{
      margin-top: 10rpx;
			padding: 30upx;
			background-color: #fff;
			border-radius: 20upx;
			display: flex;
			.left{
				width:130upx ;
				height: 130upx;
				image{
					width:130upx ;
					height: 130upx;
				}
			}
			.right{
				margin-left: 20upx;
				.title{
					font-size: 32upx;
					color: #333;
					font-weight: bold;
				}
				.titles{
					font-size: 24upx;
					color: #999;
					margin-top: 10upx;
				}
			}
		}
		.titlebox{
			font-size: 28upx;
			color: #333;
			font-weight: bold;
			margin: 20upx 0;
		}
		.moneys{
			display: flex;
			padding: 30upx;
			background-color: #fff;
			border-radius: 20upx	;
			input{
				margin-left: 20upx;
			}
		}
		.goodsbox {
			padding: 30upx;
			border-radius: 30upx;
			background-color: #fff;
			margin-top: 20upx;
			.goods {
				display: flex;
				margin-bottom: 30upx;

				image {
					width: 200upx;
					height: 200upx;
					border-radius: 30upx;
					margin-right: 30upx;
					// background-color: aquamarine;
				}

				.right {
					width: calc(100% - 230upx);

					.name {
						color: #333333;
						font-size: 32upx;
						font-weight: bold;
					}

					.gg {
						color: #999999;
						font-size: 24upx;
						margin: 20upx 0;
					}

					.num {
						color: #999999;
						font-size: 24upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
			}


			.paylist {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20upx 0;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 40upx;
						height: 40upx;
						margin-right: 20upx;
					}
				}

			}
		}
		.prompt{
			font-size: 10px;
			margin-top: 30upx;
			color: red;
		}
	}
	.popupcontent{
		background-color: #f5f5f5;
		border-radius: 30upx 30upx 0 0;
		overflow: hidden;
		.btn{
			background-color: $color1;
			margin: 20upx;
			padding: 20upx;
			text-align: center;
			color: #fff;
			border-radius: 40upx;
		}
	}
	.backList{
		display: flex;
		align-items: center;
		background-color: #fff;
		justify-content: space-between;
		padding: 20upx;
		border-radius: 20upx;
		margin-top: 20upx;
		.backImg{
			width: 48rpx;
			height: 48rpx;
		}
		.backNames{
			margin-left: 6px;
			display: flex;
			align-items: center;
			.backName,.backId{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #333333;
				margin: 0 10px;
			}
			.backName{
				margin-left: 10px;
			}
		}
		.backNamesm{
			margin: 0 6px;
			text{
				font-size: 16px;
				color: #333333;
			}
		}
		.selects{
			width: 14px;
			height: 15px;
		}
	}
		.sharep{
			width: 100%;
			.selectBank{
				width: 94%;
				margin: 0 auto;
				position: relative;
				text-align: center;
				padding: 15px 0;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				.selectMdd{
					color: #333333;
					font-size: 30upx;
					font-weight: 600;
				}
				.popupIcon{
					position: absolute;
					right: 0%;
					top: 10px;
				}
			}
			.information{
				padding: 10px;
				height: 300px;
				background-color: #f5f5f5;
				overflow-y: scroll;

				.BankList{
					background-color: #fff;
					padding: 15px;
					border-radius: 10upx;
					margin-bottom: 30upx;
					.nameAndBankName{
						margin-bottom: 4px;
						color: #333;
						.name{
							margin-right: 10px;
						}
					}
					.bankAddress{
						color: #333;
						.address{
							margin-right: 10px;
						}
					}
				}
			}
		}
		.itembox{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 20upx;
			border-radius: 20upx;
			font-size: 14px;
			margin: 20upx 0;
			.label{
				width: 30%;
			}
			.input{
				width: 70%;
				justify-content: space-between;
			}
		}
</style>
